<%
/**
 * Alert 消息提示组件
 * @param {String} type - 消息类型：'success', 'error', 'warning', 'info'，默认为 'info'
 * @param {String} message - 消息内容
 * @param {String} title - 可选的标题
 * @param {Boolean} dismissible - 是否可关闭，默认false
 * @param {Number} autoClose - 自动关闭时间(毫秒)，0表示不自动关闭，默认0
 * @param {String} className - 额外的CSS类，可选
 */

const alertType = typeof type !== 'undefined' ? type : 'info';
const alertMessage = typeof message !== 'undefined' ? message : '';
const alertTitle = typeof title !== 'undefined' ? title : '';
const isDismissible = typeof dismissible !== 'undefined' ? dismissible : false;
const autoCloseTime = typeof autoClose !== 'undefined' ? parseInt(autoClose) : 0;
const extraClass = typeof className !== 'undefined' ? className : '';

const alertId = 'alert-' + Math.random().toString(36).substr(2, 9);

let alertClass = '';
let iconClass = '';

switch(alertType) {
    case 'success':
        alertClass = 'bg-green-50 border-green-200 text-green-700';
        iconClass = 'fas fa-check-circle text-green-400';
        break;
    case 'error':
        alertClass = 'bg-red-50 border-red-200 text-red-700';
        iconClass = 'fas fa-exclamation-circle text-red-400';
        break;
    case 'warning':
        alertClass = 'bg-yellow-50 border-yellow-200 text-yellow-700';
        iconClass = 'fas fa-exclamation-triangle text-yellow-400';
        break;
    case 'info':
    default:
        alertClass = 'bg-blue-50 border-blue-200 text-blue-700';
        iconClass = 'fas fa-info-circle text-blue-400';
        break;
}
%>

<% if (alertMessage) { %>
    <div class="border rounded-lg p-2 my-2 <%= alertClass %> <%= extraClass %> transition-all duration-300"
         id="<%= alertId %>"
         <% if (autoCloseTime > 0) { %>data-auto-close="<%= autoCloseTime %>"<% } %>>
        <div class="flex">
            <i class="<%= iconClass %> mr-3 mt-1"></i>
            <div class="flex-1">
                <% if (alertTitle) { %>
                    <div class="font-medium mb-1"><%= alertTitle %></div>
                <% } %>
                <div class="text-sm"><%= alertMessage %></div>

                <% if (autoCloseTime > 0) { %>
                    <div class="mt-2 h-1 bg-gray-200 rounded-full overflow-hidden">
                        <div class="h-full bg-current opacity-30 rounded-full transition-all ease-linear"
                             id="<%= alertId %>-progress"
                             style="width: 100%; transition-duration: <%= autoCloseTime %>ms; transform-origin: left;"></div>
                    </div>
                <% } %>
            </div>

            <% if (isDismissible || autoCloseTime > 0) { %>
                <button type="button"
                        class="ml-3 text-gray-400 hover:text-gray-600 transition-colors duration-200"
                        onclick="dismissAlert('<%= alertId %>')">
                    <i class="fas fa-times"></i>
                </button>
            <% } %>
        </div>
    </div>

    <script>
        (function initializeAlert() {
            const alertElement = document.getElementById('<%= alertId %>');
            const autoCloseTime = parseInt(alertElement.dataset.autoClose) || 0;

            if (autoCloseTime > 0) {
                const progressBar = document.getElementById('<%= alertId %>-progress');

                if (progressBar) {
                    progressBar.offsetWidth;
                    progressBar.style.width = '0%';
                }

                setTimeout(() => {
                    dismissAlert('<%= alertId %>');
                }, autoCloseTime);
            }
        })();

        function dismissAlert(alertId) {
            const alertElement = document.getElementById(alertId);
            if (!alertElement) return;

            alertElement.style.opacity = '0';
            alertElement.style.transform = 'translateY(-10px)';

            setTimeout(() => {
                if (alertElement.parentNode) {
                    alertElement.parentNode.removeChild(alertElement);
                }
            }, 300);
        }
    </script>
<% } %>